<template>
    <div class="app-container">
      <!-- 搜索区域 -->
    <el-card class="search-wrapper">
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="医生姓名" prop="nickName">
          <el-input v-model="queryParams.nickName" placeholder="请输入医生姓名" clearable style="width: 200px" />
        </el-form-item>
        <el-form-item label="医生类型" prop="type">
          <el-select v-model="queryParams.type" placeholder="请选择医生类型" style="width: 200px">
            <el-option label="医生" value="doctor" />
            <el-option label="康复师" value="rehabilitator" />
            <el-option label="心理咨询师" value="counselor" />
          </el-select>
        </el-form-item>
        <el-form-item label="专家类型" prop="typeId">
          <el-select v-model="queryParams.typeId" clearable placeholder="请选择专家类型" style="width: 200px">
            <el-option v-for="item in doctorTypes" :key="item.typeId" :label="item.name" :value="item.typeId" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否专家" prop="isField">
          <el-select v-model="queryParams.isField" placeholder="请选择" clearable style="width: 200px">
            <el-option label="是" :value="0" />
            <el-option label="否" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="在线状态" prop="isOnline">
          <el-select v-model="queryParams.isOnline" placeholder="请选择" clearable style="width: 200px">
            <el-option label="在线" :value="1" />
            <el-option label="离线" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">搜索</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

      <!-- 医生类型Tab -->
    <!-- <el-tabs v-model="current" @tab-click="handleTabChange">
      <el-tab-pane v-for="(item, index) in doctorTypes" :key="index" :label="item.name" :name="index">
      </el-tab-pane>
    </el-tabs> -->

      <!-- 列表区域 -->
    <el-card class="table-wrapper">
      <el-table v-loading="loading" :data="doctorList">
        <el-table-column type="index" label="序号" width="70" />
        <el-table-column prop="avatar" label="头像" width="80">
          <template #default="{ row }">
            <el-avatar :size="40" :src="row.avatar" />
          </template>
        </el-table-column>
        <el-table-column prop="nickName" label="姓名" />
        <el-table-column prop="type" label="类型">
          <template #default="{ row }">
            <el-tag v-if="row.type === 'doctor'">医生</el-tag>
            <el-tag v-else-if="row.type === 'rehabilitator'" type="success">康复师</el-tag>
            <el-tag v-else-if="row.type === 'counselor'" type="warning">心理咨询师</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="职称" />
        <el-table-column prop="hospitalName" label="所属医院" />
        <el-table-column prop="departmentName" label="所属科室" />
        <el-table-column prop="isField" label="是否专家">
          <template #default="{ row }">
            <el-tag v-if="row.isField === 0" type="success">是</el-tag>
            <el-tag v-else type="info">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="typeName" label="专家类型"></el-table-column>
        <el-table-column prop="isOnline" label="在线状态">
          <template #default="{ row }">
            <el-tag v-if="row.isOnline === 1" type="success">在线</el-tag>
            <el-tag v-else type="info">离线</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="authStatus" label="审核状态">
          <template #default="{ row }">
            <el-tag v-if="row.authStatus == 0" type="info">未认证</el-tag>
            <el-tag v-else-if="row.authStatus == 1" type="warning">待审核</el-tag>
            <el-tag v-else-if="row.authStatus == 2" type="success">已认证</el-tag>
            <el-tag v-else-if="row.authStatus == 3" type="danger">认证失败</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleDetail(row)">详情</el-button>
            <el-button type="warning" link @click="handleAudit(row)">审核</el-button>
            <el-button type="success" link @click="handleSetType(row)">设置专家</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
<!--      <el-pagination-->
<!--        v-model:current-page="queryParams.pageNum"-->
<!--        v-model:page-size="queryParams.pageSize"-->
<!--        :total="total"-->
<!--        :page-sizes="[10, 20, 30, 50]"-->
<!--        layout="total, sizes, prev, pager, next, jumper"-->
<!--        @size-change="handleSizeChange"-->
<!--        @current-change="handleCurrentChange"-->
<!--      />-->
        <pagination
            v-show="total > 0"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            :total="total"
            @pagination="getList"
        />
    </el-card>

      <!-- 详情弹窗 -->
    <el-dialog v-model="detailVisible" title="医生详情" width="600px">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="姓名">{{ detailData.nickName }}</el-descriptions-item>
        <el-descriptions-item label="类型">
          <el-tag v-if="detailData.type === 'doctor'">医生</el-tag>
          <el-tag v-else-if="detailData.type === 'rehabilitator'" type="success">康复师</el-tag>
          <el-tag v-else-if="detailData.type === 'counselor'" type="warning">心理咨询师</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="职称">{{ detailData.title }}</el-descriptions-item>
        <el-descriptions-item label="所属医院">{{ detailData.hospitalName }}</el-descriptions-item>
        <el-descriptions-item label="所属科室">{{ detailData.departmentName }}</el-descriptions-item>
        <el-descriptions-item label="是否专家">
          <el-tag v-if="detailData.isField === 0" type="success">是</el-tag>
          <el-tag v-else type="info">否</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="专家类型">{{ detailData.typeName }}</el-descriptions-item>
        <el-descriptions-item label="擅长" :span="2">{{ detailData.specialties }}</el-descriptions-item>
        <el-descriptions-item label="简介" :span="2">{{ detailData.profile }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <!-- 审核弹窗 -->
    <el-dialog v-model="auditVisible" title="医生审核" width="500px">
      <el-form :model="auditForm" label-width="100px">
        <el-form-item label="认证状态" prop="authStatus">
          <el-select v-model="auditForm.authStatus" placeholder="请选择认证状态">
            <el-option label="未认证" value="0" />
            <el-option label="待审核" value="1" />
            <el-option label="已认证" value="2" />
            <el-option label="认证失败" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="拒绝原因" prop="rejectReason" v-if="auditForm.authStatus == '3'">
          <el-input v-model="auditForm.rejectReason" type="textarea" placeholder="请输入拒绝原因" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="auditVisible = false">取消</el-button>
          <el-button type="primary" @click="submitAudit">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 设置专家类型弹窗 -->
    <el-dialog v-model="setTypeVisible" title="设置专家类型" width="500px">
      <el-form :model="typeForm" label-width="100px">
        <el-form-item label="专家类型" prop="typeId">
          <el-select v-model="typeForm.typeId" placeholder="请选择专家类型">
            <el-option v-for="item in doctorTypes" :key="item.typeId" :label="item.name" :value="item.typeId" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="setTypeVisible = false">取消</el-button>
          <el-button type="primary" @click="submitSetType">确定</el-button>
        </span>
      </template>
    </el-dialog>
    </div>
  </template>

  <script lang="ts" setup>
  import { ref, reactive, onMounted } from 'vue'
  import { getDoctorList, getDoctorDetail, getDoctorSchedule, getDoctorType, setDoctorType } from '@/api/doctor'
  import { auditDoctorAuth } from '@/api/auth'
  import { ElMessage } from 'element-plus'

  // 定义类型接口
  interface DoctorDetail {
    nickName: string
    type: string
    title: string
    hospitalName: string
    departmentName: string
    isField: number
    specialties: string
    profile: string
    avatar: string
    doctorId: number
    typeName: string
    authStatus?: number
  }

  // 查询参数
  const queryParams = reactive({
    pageNum: 1,
    pageSize: 10,
    nickName: '',
    type: 'doctor', // 医生类型：医生/康复师/心理咨询师
    typeId: undefined as number | undefined, // 医生类别ID
    isField: undefined as number | undefined,
    isOnline: undefined as number | undefined
  })

  const loading = ref(false)
  const total = ref(0)
  const doctorList = ref<DoctorDetail[]>([])
  const detailVisible = ref(false)
  const auditVisible = ref(false)
  const current = ref(0) // 当前选中的tab索引
  const doctorTypes = ref<Array<{name: string, typeId: number}>>([]) // 医生类型列表
  const auditForm = reactive({
    doctorId: undefined as number | undefined,
    authStatus: '',
    rejectReason: ''
  })
  const detailData = ref<DoctorDetail>({
    nickName: '',
    type: '',
    title: '',
    hospitalName: '',
    typeName: '',
    departmentName: '',
    isField: 0,
    specialties: '',
    profile: '',
    avatar: '',
    doctorId: 0
  })
  const setTypeVisible = ref(false)
  const typeForm = reactive({
    doctorId: undefined as number | undefined,
    typeId: undefined as number | undefined
  })

  // 获取医生类型列表
  const getDoctorTypes = async () => {
    try {
      const res = await getDoctorType()
      if (res.code === 200) {
        doctorTypes.value = (res.data || []).map((item: any) => ({
          name: item.typeName,
          typeId: item.typeId
        }))
      }
    } catch (error) {
      console.error(error)
    }
  }

  // 获取医生列表
  const getList = async () => {
    loading.value = true
    try {
      const res = await getDoctorList(queryParams)
      if (res.code == 200) {
        doctorList.value = res.rows
        total.value = res.total
      }
    } catch (error) {
      console.error(error)
    }
    loading.value = false
  }

  // 查询
  const handleQuery = () => {
    queryParams.pageNum = 1
      console.log('handleQuery')
    getList()
  }

  // 重置
  const resetQuery = () => {
    queryParams.nickName = ''
    queryParams.type = 'doctor' // 重置医生类型为默认值
    queryParams.typeId = undefined // 重置为未选择类别
    queryParams.isField = undefined
    queryParams.isOnline = undefined
    handleQuery()
  }

  // 查看详情
  const handleDetail = async (row: any) => {
    try {
      const res = await getDoctorDetail(row.doctorId)
      if (res.code == 200) {
        detailData.value = res.data
        detailVisible.value = true
      }
    } catch (error) {
      console.error(error)
    }
  }



  // 审核相关
  const handleAudit = (row: any) => {
    auditForm.doctorId = row.doctorId
    auditForm.authStatus = (row.authStatus ?? 0).toString()
    auditForm.rejectReason = ''
    auditVisible.value = true
  }

  // 提交审核
  const submitAudit = async () => {
    if (!auditForm.doctorId || !auditForm.authStatus) {
      ElMessage.warning('请选择认证状态')
      return
    }

    try {
      const res = await auditDoctorAuth(auditForm.doctorId, {
        authStatus: auditForm.authStatus,
        rejectReason: auditForm.rejectReason
      })
      if (res.code === 200) {
        ElMessage.success('审核成功')
        auditVisible.value = false
        getList() // 刷新列表
      }
    } catch (error) {
      console.error(error)
    }
  }

  // 分页
  const handleSizeChange = (val: number) => {
    queryParams.pageSize = val
      console.log('handleSizeChange')
    getList()
  }

  const handleCurrentChange = (val: number) => {
    queryParams.pageNum = val
      console.log('handleCurrentChange')
    getList()
  }

  // Tab切换处理
  const handleTabChange = (item) => {
    current.value = Number(item.index)
    if (doctorTypes.value[item.index]) {
      queryParams.typeId = doctorTypes.value[item.index].typeId
        console.log('handleTabChange')
      getList()
    }
  }

  // 设置专家类型
  const handleSetType = (row: any) => {
    typeForm.doctorId = row.doctorId
    typeForm.typeId = row.typeId
    setTypeVisible.value = true
  }

  // 提交设置专家类型
  const submitSetType = async () => {
    if (!typeForm.doctorId || !typeForm.typeId) {
      ElMessage.warning('请选择专家类型')
      return
    }

    try {
      const res = await setDoctorType(typeForm.doctorId, typeForm.typeId)
      if (res.code === 200) {
        ElMessage.success('设置成功')
        setTypeVisible.value = false
        getList() // 刷新列表
      }
    } catch (error) {
      console.error(error)
    }
  }

  onMounted(() => {
    getDoctorTypes() // 获取医生类型列表
    console.log('onMounted getList')
      getList()
  })
  </script>

  <style lang="scss" scoped>
  .app-container {
    padding: 20px;

    .search-wrapper {
      margin-bottom: 20px;
    }

    .table-wrapper {
      .el-pagination {
        margin-top: 20px;
        justify-content: flex-end;
      }
    }
  }
  </style>
